<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <input
        type="text"
        placeholder="请输入关键字"
        v-bind:value="keyword"
        v-on:input="handleInput"
      />

      <button @click="handleSearch">搜索</button>
      <hr />
      <p>搜索结果</p>
      <ul>
        <li v-for="item in books">{{ item.id }} - {{ item.name }}</li>
      </ul>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";
      import Axios from "./lib/axios.esm.browser.js";

      createApp({
        data() {
          return {
            keyword: "", // 用于存储当前输入框的内容

            books: [], // 搜索结果
          };
        },

        methods: {
          handleInput(event) {
            // 1. 获取真实DOM上输入的value值
            const value = event.target.value;

            // 2. 将 value 赋值给 keyword
            this.keyword = value;
          },

          // 获取数据，调用后端接口
          getData() {
            Axios.get("http://localhost:3000/books", {
              // 问号传参
              params: {
                // 按 name 字段精准搜索
                // name: this.keyword,
                // 按 name 字段模糊搜索
                name_like: this.keyword,
              },
            }).then((response) => {
              const data = response.data;
              this.books = data;
            });
          },

          handleSearch() {
            // 重新获取接口数据即可。
            this.getData()
          }
        },

        mounted() {
          // 在组件挂载完成之后。默认调用一次
          this.getData();
        },
      }).mount("#app");
    </script>
  </body>
</html>
